<script setup lang="ts">
import '@wangeditor/editor/dist/css/style.css'; // 引入 css
import {onBeforeUnmount, ref, shallowRef, onMounted, nextTick} from 'vue';
import {Editor, Toolbar} from '@wangeditor/editor-for-vue';

defineOptions({name: 'WangEditor'});
// const props = withDefaults(defineProps<{visible: boolean; title: string; data: any}>(), {
//   visible: false,
//   title: '',
//   data: {},
// });
// const emit = defineEmits<{
//   (e: 'update:visible', value: boolean): void;
// }>();

// const visible = computed<boolean>({
//   get: () => props.visible,
//   set: (value) => {
//     emit('update:visible', value);
//   },
// });

const visible = ref(false);
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();
const mode = ref('default'); // default  或 'simple'
// 内容 HTML
const valueHtml = ref('<p>hello</p>');

const toolbarConfig = {
  excludeKeys: [
    'uploadVideo',
    'headerSelect',
    'italic',
    'group-more-style',
    'group-video',
    'insertTable',
    'divider',
    'insertImage',
    'insertLink',
    'codeBlock',
    // 'redo',
    // 'undo',
    'bgColor',
    'todo',
    'emotion',
    // 'blockquote',
  ], // 排除菜单组，写菜单组 key 的值即可
};
const editorConfig = {placeholder: '请输入内容...'};

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

const handleCreated = (editor: any) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
  // nextTick(() => {
  //   const editor = editorRef.value;
  //   const toolbar = DomEditor.getToolbar(editor);
  //   console.log(toolbar?.getConfig().toolbarKeys);
  // });
};
const onModal = (value: boolean) => {
  visible.value = value;
  console.log('valueHtml', valueHtml.value);
};
</script>

<template>
  <a-modal v-model:open="visible" title="富文本编辑器WangEditor" width="700px" @ok="onModal(false)">
    <div style="border: 1px solid #ccc">
      <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :default-config="toolbarConfig" :mode="mode" />
      <Editor
        v-model="valueHtml"
        style="overflow-y: hidden; height: 500px"
        :default-config="editorConfig"
        :mode="mode"
        @on-created="handleCreated"
      />
    </div>
  </a-modal>
  <a-button @click="onModal(true)">富文本编辑器</a-button>
</template>
